<template>

            <el-table
            border
            width="100%"
            :data="gifts">
              <el-table-column label="赠品名称" style="width: 210px">
                  <template slot-scope="{row}">
                    <el-select
                      v-model="row.giftName"
                      style="width: 100%;"
                      placeholder="请选择对应商品名称"
                      filterable
                      :filter-method="queryProduct"
                      clearable
                    >
                      <el-option v-for="item in giftNameList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  <!-- <el-select style="width:100%;display: inline-block"  v-model="row.giftName" placeholder="请选择赠品">
                    <el-option v-for="(item,index) in giftNameList"  :label="item.name" :value="item.id" ></el-option>
                  </el-select> -->
                  </template>
              </el-table-column>
              <el-table-column label="赠品数量" style="width: 100px">
                <template slot-scope="{row}">
                  <el-input v-model="row.quantity" ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="月限量" style="width: 100px">
                <template slot-scope="{row}">
                  <el-input v-model="row.availableQuantity" ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作"  style="width: 50px">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                    <a style="margin-left: 10px" @click="deleteAd(scope.$index)">
                      <i style="color: #F56C6C" class="el-icon-delete"></i>
                    </a>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>


</template>

<script>
  import { list } from '../../../api/product'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../../utils/utils.js'
  export default {
    directives: {elDragDialog},
    name: 'gift-list',
    props:{
    },
    data(){
      return{
        gifts:[],
        getPromotionId:'',
        editVisible:true,
        giftNameList:[],
        productMark: false
      }

    },
    props:["giftType","editGift","editGiftType","promotionId"],
    created() {
      // this.getGiftName()
      this.queryProduct()
    },

    methods:{

      deleteAd(index){
          this.gifts.splice(index, 1)
      },
      add(){
        var PromotionGift={
          giftId:this.giftType,
          giftName:'',
          quantity:0,
          availableQuantity:0,
        }
        this.gifts.push(PromotionGift)
        console.log(this.gifts)
      },
      queryProduct(query) {
        clearTimeout(this.productMark)
        this.productMark = setTimeout(() => {
          this.giftNameList = []
          list({ name: query }).then(res => {
            this.giftNameList = res.data.data
            /* if (utils.isNull(this.editForm.itemList)) { return }
            this.editForm.itemList.forEach(list => { // 让每一项与列表比对,找不到则添加进去
              list.forEach(item => {
                const notFound = this.giftNameList.find(val => { return val.id == item.productId }) // 找到列表里没有的数据
                if (!notFound && item.productId !== '') {
                  const obj = {
                    name: item.productName,
                    id: item.productId
                  }
                  this.giftNameList.unshift(obj) // 把没有的数据添加到列表里
                }
              })
            }) */
          }).catch(err => {
            console.log(err)
          })
        }, 300)
      },
      /* getGiftName(){
        list().then(response =>{
          response.data.data.forEach(item=>{
            let gift={
              name:item.name,
              id:item.id
            }
            this.giftNameList.push(gift)

          })
        })
      } */
    }
  }
</script>

<style scoped>

</style>
